<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getLabel } from '@/utils/common'
	import { getDicts } from '@/api/login'
	import { getSortingList } from '@/api/inventory'
	
	const loading = ref(false)
	const query = ref({name: '', current: 1, size: 20})
	const triggered = ref(false)
	const loadStatus = ref('loadmore')
	const total = ref(0)
	const list = ref([])
	const operateId = ref(null)
	const refreshId = ref(null)
	const unitColumns = ref([])
	const buttonStyle = ref({height: '80rpx'})
	
	function refreshList() {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		triggered.value = true
		list.value = []
		query.value.current = 1
		const name = query.value.name
		getSortingList(query.value).then(res => {
			if(query.value.name !== name) return
			let result = res.result || {}
			let data = result.records || []
			total.value = Number(result.total)
			list.value = data
			triggered.value = false
			let curLength = list.value.length || 0
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
		}).catch(() => {
			triggered.value = false
			loadStatus.value = 'loadmore'
		})
	}
	function lowerList(noReplace = true) {
		if(list.value.length < total.value || !noReplace){
			loadStatus.value = 'loading'
			query.value.current ++
			getSortingList(query.value).then(res => {
				let result = res.result || {}
				let data = result.records || []
				total.value = Number(result.total)
				if(noReplace) {
					list.value.push(...data)
				} else {
					const preList = list.value.slice(0, (query.value.current - 1) * query.value.size)
					list.value = preList.concat(data)
				}
				let curLength = list.value.length || 0
				loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			}).catch(() => {
				query.value.current --
				loadStatus.value = 'loadmore'
			})
		}
	}
	function restore() {
		triggered.value = false
	}
	function refreshItem(id) {
		let index = list.value.findIndex(item => item.goodsId === id)
		if(index != -1) {
			query.value.current = Math.floor(index / query.value.size)
			lowerList(false)
		}
	}
	function getDictLabel(key, value) {
		switch(key) {
			case 'unit': return getLabel(unitColumns.value, value);
			default: return ''
		}
	}
	function goView(id) {
		uni.navigateTo({
			url: '/pages/work/inventorySortingList?id=' + id,
			success: () => {
				refreshId.value = id
			}
		})
	}
	
	onLoad(() => {
		getDicts('sys_good_unit').then(res => {
			unitColumns.value = res.result?.records || []
			triggered.value = true
		})
	})
	onShow(() => {
		if(refreshId.value) {
			refreshItem(refreshId.value)
			refreshId.value = undefined
		}
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head">
			<uv-search placeholder="请输入商品名称" searchIconSize="44" v-model="query.name" bgColor="#F5F5F5" :showAction="false" @search="triggered = true"
				height="72"></uv-search>
		</view>
		<scroll-view scroll-y="true" class="app-content" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="refreshList" lower-threshold="10" @scrolltolower="lowerList" @refresherrestore="restore">
			<view class="content-list" v-if="list.length">
				<view class="list-box" v-for="item in list" :key="item.goodsId">
					<view class="box-head">
						<view class="head-name">{{item.name || '--'}}</view>
						<view class="head-code">商品编号：{{item.goodsCode || '--'}}</view>
					</view>
					<view class="box-content">
						<view class="content-info">
							<text class="info-item">可用库存：{{item.usable || 0}}</text>
							<text class="info-item">单位：{{getDictLabel('unit', item.unit) || '--'}}</text>
						</view>
						<view class="content-info">
							<text>商品类型：{{item.typeName || '--'}}</text>
						</view> 
					</view>
					<view class="box-bottom">
						<uv-button type="primary" shape="circle" :custom-style="buttonStyle" text="分拣" @click="goView(item.goodsId)"></uv-button>
					</view>
				</view>
				<uv-load-more :status="loadStatus" fontSize="28" iconSize="34" line></uv-load-more>
			</view>
			<empty text="没有找到分拣记录" v-else-if="loadStatus != 'loading'"></empty>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		height: 100vh;
		.app-head{
			height: 104rpx;
			padding: 16rpx 32rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.05);
		}
		.app-content{
			width: 100%;
			height: calc(100% - 104rpx);
			.content-list{
				padding: 24rpx;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
			}
		}
		.list-box{
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			.box-head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 10rpx;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #F5F5F5;
				.head-name{
					font-size: var(--theme-lg);
					font-weight: 600;
				}
				.head-code{
					flex-shrink: 0;
					color: #9CA0A6;
					font-size: var(--theme-sm);
				}
			}
			.box-content{
				display: flex;
				flex-direction: column;
				gap: 22rpx;
				padding-top: 24rpx;
				.content-info{
					display: flex;
					align-items: center;
					gap: 16rpx;
					.info-item{
						width: calc(50% - 8rpx);
					}
				}
			}
			.box-bottom{
				padding-top: 32rpx;
			}
		}
	}
</style>